<template>
  <div style="width:100%;height:auto; margin:0 auto;">
    <div class="filter-container" style="text-align:center;">
      <el-input v-model="queryPage.name" class="filter-item" placeholder="模板名称" style="width: 150px" clearable />
      <el-select v-model="queryPage.type" class="filter-item" placeholder="模板类型" style="width: 150px" clearable>
        <el-option v-for="item in htTypes" :key="item.code" :label="item.name" :value="item.code" />
      </el-select>

      <el-button class="filter-item" icon="el-icon-search" type="primary" @click="search()">
        查询
      </el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" height="540" fit highlight-current-row style="width: 100%;" border @current-change="handleCurrentChange">
      <el-table-column label="序号" type="index" :index="indexMethod" header-align="center" align="center" width="80" />
      <el-table-column header-align="center" align="left" label="模板名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="模板类型">
        <template slot-scope="scope">
          <span>{{ getDicName(scope.row.type,'CDS_TEMPLATE_TYPE') }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="状态">
        <template slot-scope="scope">
          <span>{{ getDicName(scope.row.state,'YW_BASE_STATUS') }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="创建人">
        <template slot-scope="scope">
          {{ scope.row.createUserName }}
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="right" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>-1" :total="total" :page.sync="queryPage.page" :limit.sync="queryPage.limit" @pagination="loadList" />

    <div style="text-align:center;margin-top:10px;">
      <el-button type="primary" @click="onSave">确定</el-button>
      <el-button type="danger" class="quxiao_btn" @click="closePage()">取消</el-button>
    </div>
  </div>
</template>

<script>

import { getPage } from '@/api/mdTemplate'
import { getDictListByCode } from '@/api/dict'

import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  props: {
    proid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      listLoading: false,
      queryPage: {
        page: 1,
        limit: 10
      },
      total: 0,
      list: [],
      xmStatus: [],
      htTypes: []
    }
  },
  created() {
    this.getDictList('CDS_TEMPLATE_TYPE')
    this.getDictList('YW_BASE_STATUS')
    this.loadList()
  },
  methods: {
    indexMethod(index) {
      return (index + 1) + (this.queryPage.page - 1) * this.queryPage.limit
    },
    getDictList(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_TEMPLATE_TYPE') {
          this.htTypes = response.data
        }
        if (code === 'YW_BASE_STATUS') {
          this.xmStatus = response.data
        }
      })
    },
    getDicName(code, flag) {
      var dict = []
      if (flag === 'YW_TEMPLATE_TYPE') {
        dict = this.htTypes
      } else if (flag === 'YW_BASE_STATUS') {
        dict = this.xmStatus
      }
      for (var i in dict) {
        if (dict[i].code === code) {
          return dict[i].name
        }
      }
    },
    search() { // 查询
      this.loadList()
    },
    loadList() { // 加载列表
      this.list = []
      this.listLoading = true
      getPage(this.queryPage).then(response => {
        const { data } = response
        this.list = data.records

        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    //保存选中结果
    handleCurrentChange(val) {
      this.currentRow = val
    },
    onSave() {
      this.$emit('update:visible', false)
      this.$emit('sendmsg', this.currentRow)
    },
    closePage() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>

.el-input >>> .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}
.el-cascader >>> .el-input .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}
.el-select >>> .el-input .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}
.el-input >>> .el-input__icon{
  height: 30px !important;
  line-height: 30px !important;
}
.el-select >>> .el-input__icon{
  height: 30px !important;
  line-height: 30px !important;
}
</style>
